---
title: "Overview"
metaTitle: "Language Features Overview"
description: "A quick overview on ReScript's syntax"
canonical: "/docs/manual/overview"
section: "Language Features"
order: 1
---

# Overview

## Comparison to JS

### Semicolon

| JavaScript                         | ReScript             |
| ---------------------------------- | -------------------- |
| Rules enforced by linter/formatter | No semicolon needed! |

### Comments

| JavaScript           | ReScript                         |
| -------------------- | -------------------------------- |
| `// Line comment`    | Same                             |
| `/* Comment */`      | Same                             |
| `/** Doc Comment */` | `/** Before Types/Values */`     |
|                      | `/*** Standalone Doc Comment */` |

### Variable

| JavaScript              | ReScript                              |
| ----------------------- | ------------------------------------- |
| `const x = 5;`          | `let x = 5`                           |
| `var x = y;`            | No equivalent (thankfully)            |
| `let x = 5; x = x + 1;` | `let x = ref(5); x := x.contents + 1` |

### String & Character

| JavaScript                   | ReScript              |
| ---------------------------- | --------------------- |
| `"Hello world!"`             | Same                  |
| `'Hello world!'`             | Strings must use `"`  |
| `"hello " + "world"`         | `"hello " ++ "world"` |
| `` `hello ${message}` ``     | Same                  |
| `` sql`select ${fnName};` `` | Same                  |

### Boolean

| JavaScript                           | ReScript                                       |
| ------------------------------------ | ---------------------------------------------- |
| `true`, `false`                      | Same                                           |
| `!true`                              | Same                                           |
| `\|\|`, `&&`, `<=`, `>=`, `<`, `>`   | Same                                           |
| `a === b`, `a !== b`                 | Same                                           |
| No deep equality (recursive compare) | `a == b`, `a != b`                             |
| `a == b`                             | No equality with implicit casting (thankfully) |

### Number

| JavaScript  | ReScript     |
| ----------- | ------------ |
| `3`         | Same \*      |
| `3.1415`    | Same         |
| `3 + 4`     | Same         |
| `3.0 + 4.5` | `3.0 +. 4.5` |
| `5 % 3`     | `mod(5, 3)`  |

\* JS has no distinction between integer and float.

### Object/Record

| JavaScript          | ReScript                                |
| ------------------- | --------------------------------------- |
| no types            | `type point = {x: int, mutable y: int}` |
| `{x: 30, y: 20}`    | Same                                    |
| `point.x`           | Same                                    |
| `point.y = 30;`     | Same                                    |
| `{...point, x: 30}` | Same                                    |

### Array

| JavaScript         | ReScript              |
| ------------------ | --------------------- |
| `[1, 2, 3]`        | Same                  |
| `myArray[1] = 10`  | Same                  |
| `[1, "Bob", true]` | `(1, "Bob", true)` \* |

\* ReScript does not have heterogenous arrays. Use tuples or [Untagged Variants](./variant.mdx#untagged-variants) instead.

### Null

| JavaScript          | ReScript  |
| ------------------- | --------- |
| `null`, `undefined` | `None` \* |

\* Again, only a spiritual equivalent; we don't have nulls, nor null bugs! But we do have an `option` type for when you actually need nullability.

### Function

| JavaScript                      | ReScript                     |
| ------------------------------- | ---------------------------- |
| `arg => retVal`                 | Same                         |
| `function named(arg) {...}`     | `let named = (arg) => {...}` |
| `const f = function(arg) {...}` | `let f = (arg) => {...}`     |
| `add(4, add(5, 6))`             | Same                         |

### Async Function / Await

| JavaScript                              | ReScript                                              |
| --------------------------------------- | ----------------------------------------------------- |
| `async (arg) => {...}`                  | Same                                                  |
| `async function named(arg) {...}`       | `let named = async (arg) => {...}`                    |
| `await somePromise`                     | Same                                                  |
| `async (arg): Promise<string> => {...}` | `async (arg): string => {...}` (note the return type) |

### Blocks

<table>
  <thead>
    <tr>
      <th>JavaScript</th>
      <th>ReScript</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
      ```
      const myFun = (x, y) => {
        const doubleX = x + x;
        const doubleY = y + y;
        return doubleX + doubleY;
      };
      ```
      </td>
      <td>
      ```
      let myFun = (x, y) => {
        let doubleX = x + x
        let doubleY = y + y
        doubleX + doubleY
      }
      ```
      </td>
    </tr>
  </tbody>
</table>

### If-else

| JavaScript            | ReScript                                                                             |
| --------------------- | ------------------------------------------------------------------------------------ |
| `if (a) {b} else {c}` | `if a {b} else {c}` \*                                                               |
| `a ? b : c`           | Same                                                                                 |
| `switch`              | `switch` but [super-powered pattern matching!](./pattern-matching-destructuring.mdx) |

\* Our conditionals are always expressions! You can write `let result = if a {"hello"} else {"bye"}`

### Destructuring

| JavaScript                    | ReScript                    |
| ----------------------------- | --------------------------- |
| `const {a, b} = data`         | `let {a, b} = data`         |
| `const [a, b] = data`         | `let [a, b] = data` \*      |
| `const {a: aa, b: bb} = data` | `let {a: aa, b: bb} = data` |

\* Gives good compiler warning that `data` might not be of length 2.

### Loop

| JavaScript                            | ReScript                     |
| ------------------------------------- | ---------------------------- |
| `for (let i = 0; i <= 10; i++) {...}` | `for i in 0 to 10 {...}`     |
| `for (let i = 10; i >= 0; i--) {...}` | `for i in 10 downto 0 {...}` |
| `while (true) {...}`                  | `while true {...}`           |

### JSX

| JavaScript                                | ReScript                   |
| ----------------------------------------- | -------------------------- |
| `<Comp message="hi" onClick={handler} />` | Same                       |
| `<Comp message={message} />`              | `<Comp message />` \*      |
| `<input checked />`                       | `<input checked=true />`   |
| No children spread                        | `<Comp>...children</Comp>` |

\* Argument punning!

### Exception

| JavaScript                                | ReScript                                         |
| ----------------------------------------- | ------------------------------------------------ |
| `throw new SomeError(...)`                | `throw(SomeException(...))`                      |
| `try {a} catch (err) {...} finally {...}` | `try a catch { \| SomeException(err) => ...}` \* |

\* No finally.

### Blocks

The last expression of a block delimited by `{}` implicitly returns (including function body). In JavaScript, this can only be simulated via an immediately-invoked function expression (since function bodies have their own local scope).

<table>
  <thead>
    <tr>
      <th>JavaScript</th>
      <th>ReScript</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
      ```
      let result = (function() {
        const x = 23;
        const y = 34;
        return x + y;
      })();
      ```
      </td>
      <td>
      ```
      let result = {
        let x = 23
        let y = 34
        x + y
      }
      ```
      </td>
    </tr>
  </tbody>
</table>

## Common Features' JS Output

| Feature                         | Example                              | JavaScript Output                          |
| ------------------------------- | ------------------------------------ | ------------------------------------------ |
| String                          | `"Hello"`                            | `"Hello"`                                  |
| String Interpolation            | `` `Hello ${message}` ``             | `"Hello " + message`                       |
| Character (disrecommended)      | `'x'`                                | `120` (char code)                          |
| Integer                         | `23`, `-23`                          | `23`, `-23`                                |
| Float                           | `23.0`, `-23.0`                      | `23.0`, `-23.0`                            |
| Integer Addition                | `23 + 1`                             | `23 + 1`                                   |
| Float Addition                  | `23.0 +. 1.0`                        | `23.0 + 1.0`                               |
| Integer Division/Multiplication | `2 / 23 * 1`                         | `2 / 23 * 1`                               |
| Float Division/Multiplication   | `2.0 /. 23.0 *. 1.0`                 | `2.0 / 23.0 * 1.0`                         |
| Float Exponentiation            | `2.0 ** 3.0`                         | `Math.pow(2.0, 3.0)`                       |
| String Concatenation            | `"Hello " ++ "World"`                | `"Hello " + "World"`                       |
| Comparison                      | `>`, `<`, `>=`, `<=`                 | `>`, `<`, `>=`, `<=`                       |
| Boolean operation               | `!`, `&&`, `\|\|`                    | `!`, `&&`, `\|\|`                          |
| Shallow and deep Equality       | `===`, `==`                          | `===`, `==`                                |
| List (disrecommended)           | `list{1, 2, 3}`                      | `{hd: 1, tl: {hd: 2, tl: {hd: 3, tl: 0}}}` |
| List Prepend                    | `list{a1, a2, ...oldList}`           | `{hd: a1, tl: {hd: a2, tl: theRest}}`      |
| Array                           | `[1, 2, 3]`                          | `[1, 2, 3]`                                |
| Record                          | `type t = {b: int}; let a = {b: 10}` | `var a = {b: 10}`                          |
| Multiline Comment               | `/* Comment here */`                 | Not in output                              |
| Single line Comment             | `// Comment here`                    | Not in output                              |

_Note that this is a cleaned-up comparison table; a few examples' JavaScript output are slightly different in reality._
